<!DOCTYPE html>
<html>
	<script src="./vue.js" type="text/javascript"></script>
	<script src="./axios.min.js" type="text/javascript"></script>
	<script src="./EmojiPicker.js" type="text/javascript"></script>
	<style>
		.emoji_picker
		{
			position: relative;
			display: flex;
			flex-direction: column;
			width: 20rem;
			height: 20rem;
			max-width: 100%;
		}
		.emoji_picker,
		.bottom_arrow
		{
			box-shadow: 0 0 5px 1px rgba(0, 0, 0, .0975);
		}
		
		.emoji_picker,
		.picker_container
		{
			border-radius: 0.5rem;
			background: white;
		}
		
		.picker_container
		{
			position: relative;
			padding: 1rem;
			overflow: auto;
			z-index: 1;
		}
		
		.category
		{
			display: flex;
			flex-direction: column;
			margin-bottom: 1rem;
			color: rgb(169, 169, 169);
		}
		.emojis_container
		{
			display: flex;
			flex-wrap: wrap;
		}
		.category button
		{
			margin: 0.5rem;
			margin-left: 0;
			background: inherit;
			border: none;
			font-size: 1.75rem;
			padding: 0;
		}
		.bottom_arrow
		{
			position: absolute;
			left: 50%;
			bottom: 0;
			width: 0.75rem;
			height: 0.75rem;
			transform: translate(-50%, 50%) rotate(45deg);
			background: white;
		}
		.main
		{
			position:fixed;
			border: 1px solid black;
		}
	</style>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<emojipicker @emoji_click="GetEmojiByUser"></emojipicker>
			</div>
		</div>
	</body>
	<script src="./main.js" type="text/javascript"></script>
</html>